import { Component, OnInit } from '@angular/core';
import { InformationService } from 'src/app/service/information.service';
import { MessageService } from 'src/app/service/message.service';

declare let AMap: any;

@Component({
  selector: 'app-hall-address',
  templateUrl: './hall-address.component.html',
  styleUrls: ['./hall-address.component.scss'],
})
export class HallAddressComponent implements OnInit {
  constructor(
    private information: InformationService,
    private message: MessageService
  ) {}

  ngOnInit(): void {
    this.getHallAddress();
  }

  map: any = null;
  initMap() {
    this.map = new AMap.Map('container', {
      viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
      zoom: 11, //初始化地图层级
      center: [113.817076, 29.253371], //初始化地图中心点
    });
    this.getMarker();
  }

  getMarker = () => {
    this.hallAddressData.forEach((hall: any) => {
      if (hall.longitude && hall.latitude) {
        const marker = new AMap.Marker({
          position: [hall.longitude, hall.latitude],
          content: `<div style="position: relative;width: 50px;height: 50px;background: url(assets/images/common/iconP2.svg);background-repeat: no-repeat;" title="${hall.title} | ${hall.addr}">
                      <span class="maker-text"></span>
                    </div>`,
        });
        marker.hall = hall;
        this.map?.add(marker);
        console.log(marker);
        marker.on('click', this.onMarkerClick); // 绑定 click 事件
        this.onMarkerClick({ target: marker });
      }
    });
  };
  onMarkerClick = (e: any) => {
    console.log(e.target);
    const hall = e.target.hall;
    // 创建信息窗体
    let info = `
      <div class="address-info-window">
        <h3>${hall.title}</h3>
        <div style="font-size: 12px;margin-bottom: 12px">
          <span>地址：</span>
          <span>${hall.addr}</span>
        </div>
        <div style="font-size: 12px;margin-bottom: 12px">
          <span></span>
          <span>${hall.extend1}</span>
        </div>
        <div style="font-size: 12px;margin-bottom: 12px">
          <span>客服热线：</span>
          <span>${hall.tel}</span>
        </div>
      </div>
    `;

    const infoWindow = new AMap.InfoWindow({
      content: info, //使用默认信息窗体框样式，显示信息内容
      offset: new AMap.Pixel(2, -30),
    });
    // e.target 就是被点击的 Marker
    infoWindow.open(this.map, e.target.getPosition()); // 打开信息窗体
  };

  getInfoWindow() {}

  hallAddressData: any = [
    {
      longitude: 113.817076,
      latitude: 29.253371,
      title: '东营智慧水务',
      addr: '东营智慧水务',
      extend1:
        '营业时间：营业时间： 星期一至星期五 8:00-12:00，14:30-17:30 星期六9:00-12:00，14:00-15:00',
      tel: '0715-4322714',
    },
  ];
  getHallAddress() {
    this.initMap();
  }
}
